<template>
  <div>
    <h1>首页</h1>
    <!-- 方法1，直接调用$store -->
    <!-- {{ $store.state.name }} -->
    <!-- {{ $store.state.count }} -->
    <!-- 方法2，自己从$store里面把数据取出存放到计算属性里面 -->
    <!-- {{ name }} -->
    <!-- {{ count }} -->
    <!-- 方法3， 修改名字赋值 -->
    <!-- {{ newName }}
    {{ newCount }} -->

    <div class="content">
      {{ count }}
      <br />
      {{ $store.state.list }}
      {{ filterList }}
      <!-- 3.打印 -->
      小王的学校详细地址: {{ detailAddr }}
      <br />
      <!-- modules {{$store.state.模块名.字段名}} -->
      {{ $store.state.user.token }}
      <!-- <br />
      <button @click="$store.commit('setData')">触发setData</button>
      <br />
      <button @click="$store.commit('user/setData')">触发第二层setData</button>
      <br />
      <button @click="$store.commit('setting/setData')">
        触发第三层setData
      </button> -->
      <br />
      <button @click="setData">触发第二层setData</button>
    </div>
    <button @click="setCount(555)">count+</button>
    <button @click="asyncSetCount(888)">延迟count增加</button>
  </div>
</template>

<script>
// 1.引入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  mounted() {
    console.log(this.$store);
  },
  computed: {
    // data 只监听这个的赋值更新
    // state后面这段数据只再创建时读取，没有后续的更新功能
    // name() {
    //   return this.$store.state.name;
    // },
    // count() {
    //   return this.$store.state.count;
    // },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 2. 调用时传入数组，以字符串形式指定需要映射的 state
    // 3. ...展开到 computed 里面
    // ...mapState(["name", "count"]),
    // ...mapState({
    //   // 直接赋值改变
    //   newName: "name",
    //   // 函数改变
    //   newCount: (state) => state.count,
    // }),

    ...mapState(["count"]),

    // 2. 接收过滤掉的数据传过来
    ...mapGetters(["filterList", "detailAddr"]),
  },
  methods: {
    // 不能直接修改state数据，在严格模式下会报错
    // this.$store.state.count++

    // 调用mutations 可以是用 this.$store.commit 函数
    // setCount(num) {
    //   this.$store.commit("setCount", num);
    // },

    // 使用辅助函数mapMutations 简写实现
    // ...mapMutations(["setCount"]),

    // addsetCount(data) {
    //   this.$store.dispatch("asyncgetCount", data);
    // },
    ...mapActions(["asyncSetCount"]),

    ...mapMutations("user", ["setData"]),
  },
};
</script>

<style>
</style>